<!DOCTYPE html>
<html>
<head>
<title>Fig. 2.8.</title>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
  }
  canvas {
    border: 1px solid #ccc;
    background-color: white;
  }
</style>
</head>
<body>
<canvas id="myCanvas" width="550" height="450"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// Style setup
ctx.strokeStyle = 'black';
ctx.fillStyle = 'black';
ctx.lineWidth = 2.5; // To match the hand-drawn style
ctx.lineCap = 'round'; // Smoother ends for hand-drawn feel

// --- Left Diagram: Torsion System ---

const leftX = 140;
const topY = 50;
const bottomY = 350;
const barSpacing = 45;
const discWidth = 130;
const discHeight = 20;
const disc1Y = 150; // center Y
const disc2Y = 250; // center Y

// Draw Top Support
ctx.beginPath();
ctx.moveTo(leftX - discWidth/2 - 20, topY);
ctx.lineTo(leftX + discWidth/2 + 20, topY);
ctx.stroke();

// Hatching for top support
ctx.save();
ctx.lineWidth = 2;
for (let i = leftX - discWidth/2 - 10; i <= leftX + discWidth/2 + 10; i += 15) {
    ctx.beginPath();
    ctx.moveTo(i, topY);
    ctx.lineTo(i - 10, topY + 10);
    ctx.stroke();
}
ctx.restore();

// Draw Bottom Support
ctx.beginPath();
ctx.moveTo(leftX - discWidth/2 - 20, bottomY);
ctx.lineTo(leftX + discWidth/2 + 20, bottomY);
ctx.stroke();

// Hatching for bottom support
ctx.save();
ctx.lineWidth = 2;
for (let i = leftX - discWidth/2 - 10; i <= leftX + discWidth/2 + 10; i += 15) {
    ctx.beginPath();
    ctx.moveTo(i, bottomY);
    ctx.lineTo(i - 10, bottomY - 10);
    ctx.stroke();
}
ctx.restore();

// Draw Torsion Bars in segments to go "through" the discs
const barX1 = leftX - barSpacing;
const barX2 = leftX;
const barX3 = leftX + barSpacing;

ctx.beginPath();
// Top segments (support to disc 1)
ctx.moveTo(barX1, topY); ctx.lineTo(barX1, disc1Y - discHeight/2);
ctx.moveTo(barX2, topY); ctx.lineTo(barX2, disc1Y - discHeight/2);
ctx.moveTo(barX3, topY); ctx.lineTo(barX3, disc1Y - discHeight/2);
// Middle segments (disc 1 to disc 2)
ctx.moveTo(barX1, disc1Y + discHeight/2); ctx.lineTo(barX1, disc2Y - discHeight/2);
ctx.moveTo(barX2, disc1Y + discHeight/2); ctx.lineTo(barX2, disc2Y - discHeight/2);
ctx.moveTo(barX3, disc1Y + discHeight/2); ctx.lineTo(barX3, disc2Y - discHeight/2);
// Bottom segments (disc 2 to support)
ctx.moveTo(barX1, disc2Y + discHeight/2); ctx.lineTo(barX1, bottomY);
ctx.moveTo(barX2, disc2Y + discHeight/2); ctx.lineTo(barX2, bottomY);
ctx.moveTo(barX3, disc2Y + discHeight/2); ctx.lineTo(barX3, bottomY);
ctx.stroke();

// Draw Discs (outlines)
ctx.strokeRect(leftX - discWidth/2, disc1Y - discHeight/2, discWidth, discHeight);
ctx.strokeRect(leftX - discWidth/2, disc2Y - discHeight/2, discWidth, discHeight);

// Draw bar segments inside the discs
ctx.beginPath();
// Disc 1
ctx.moveTo(barX1, disc1Y - discHeight/2); ctx.lineTo(barX1, disc1Y + discHeight/2);
ctx.moveTo(barX2, disc1Y - discHeight/2); ctx.lineTo(barX2, disc1Y + discHeight/2);
ctx.moveTo(barX3, disc1Y - discHeight/2); ctx.lineTo(barX3, disc1Y + discHeight/2);
// Disc 2
ctx.moveTo(barX1, disc2Y - discHeight/2); ctx.lineTo(barX1, disc2Y + discHeight/2);
ctx.moveTo(barX2, disc2Y - discHeight/2); ctx.lineTo(barX2, disc2Y + discHeight/2);
ctx.moveTo(barX3, disc2Y - discHeight/2); ctx.lineTo(barX3, disc2Y + discHeight/2);
ctx.stroke();

// Labels for Discs
ctx.font = 'bold 20px serif';
ctx.textAlign = 'center';
ctx.fillText('1', leftX - discWidth/2 - 20, disc1Y + 7);
ctx.fillText('2', leftX - discWidth/2 - 20, disc2Y + 7);

// Dashed lines for torsion
ctx.save();
ctx.lineWidth = 2;
ctx.setLineDash([4, 4]);
const dashX = barX1 - 15;
// Between top and disc 1
ctx.beginPath();
ctx.moveTo(dashX, topY + 40);
ctx.quadraticCurveTo(dashX - 10, (topY + 40 + disc1Y - discHeight/2 - 10)/2, dashX, disc1Y - discHeight/2 - 10);
ctx.stroke();
// Between disc 1 and disc 2
ctx.beginPath();
ctx.moveTo(dashX, disc1Y + discHeight/2 + 10);
ctx.quadraticCurveTo(dashX - 10, (disc1Y + discHeight/2 + 10 + disc2Y - discHeight/2 - 10)/2, dashX, disc2Y - discHeight/2 - 10);
ctx.stroke();
// Between disc 2 and bottom
ctx.beginPath();
ctx.moveTo(dashX, disc2Y + discHeight/2 + 10);
ctx.quadraticCurveTo(dashX - 10, (disc2Y + discHeight/2 + 10 + bottomY - 30)/2, dashX, bottomY - 30);
ctx.stroke();
ctx.restore(); // Restore line dash and width


// --- Right Diagram: Angular Coordinates ---

const circX = 400;
const circY = 180;
const circR = 70;

// Draw Circle
ctx.beginPath();
ctx.arc(circX, circY, circR, 0, 2 * Math.PI);
ctx.stroke();

// Draw Lines
// Vertical Reference
ctx.beginPath();
ctx.moveTo(circX, circY - circR);
ctx.lineTo(circX, circY + circR);
ctx.stroke();

// Angle lines
const angle1_deg = 25;
const angle2_deg = 55;
const angle1_rad = angle1_deg * Math.PI / 180;
const angle2_rad = angle2_deg * Math.PI / 180;

// Line for theta1
ctx.beginPath();
ctx.moveTo(circX, circY);
ctx.lineTo(circX + circR * Math.sin(angle1_rad), circY - circR * Math.cos(angle1_rad));
ctx.stroke();

// Line for theta2
ctx.beginPath();
ctx.moveTo(circX, circY);
ctx.lineTo(circX + circR * Math.sin(angle2_rad), circY - circR * Math.cos(angle2_rad));
ctx.stroke();

// Draw Arcs for angles
ctx.save();
ctx.lineWidth = 1.5;
// Arc for theta1
const arc1R = 30;
ctx.beginPath();
ctx.arc(circX, circY, arc1R, -Math.PI/2, -Math.PI/2 + angle1_rad);
ctx.stroke();

// Arc for theta2
const arc2R = 50;
ctx.beginPath();
ctx.arc(circX, circY, arc2R, -Math.PI/2, -Math.PI/2 + angle2_rad);
ctx.stroke();
ctx.restore();

// Labels for Angles
ctx.font = 'italic bold 22px serif';
// Theta 1
const label1_angle_rad = (angle1_rad * 0.6); // place it not exactly in the middle
const label1R = arc1R + 15;
ctx.fillText('\u03B8', circX + label1R * Math.sin(label1_angle_rad) - 5, circY - label1R * Math.cos(label1_angle_rad) + 5);
// Theta 2
const label2_angle_rad = (angle2_rad * 0.7);
const label2R = arc2R + 18;
ctx.fillText('\u03B8', circX + label2R * Math.sin(label2_angle_rad) - 5, circY - label2R * Math.cos(label2_angle_rad) + 10);

// Subscripts
ctx.font = 'italic bold 16px serif';
ctx.fillText('1', circX + label1R * Math.sin(label1_angle_rad) + 6, circY - label1R * Math.cos(label1_angle_rad) + 8);
ctx.fillText('2', circX + label2R * Math.sin(label2_angle_rad) + 7, circY - label2R * Math.cos(label2_angle_rad) + 13);


// --- Figure Caption ---
ctx.font = 'bold 20px sans-serif';
ctx.textAlign = 'center';
ctx.fillStyle = 'black';
ctx.fillText('Fig. 2.8.', 275, 420);

</script>
</body>
</html>